<template>
	<view class="container">
		<view class="u-m-b-20 u-m-t-20">
			<u-tabs :list="tagNameList" @click="changeCurrent()" lineWidth="40" :current="current" :scrollable="false"
				inactiveStyle="color: 'rgba(0, 0, 0, 0.5)" lineColor="#6072FF"></u-tabs>
		</view>
		<u-cell-group :customStyle="{'background': '#fff'}">
			<u-cell title="人员" :value="param.name" @click="remarkNameShow" :isLink="true" arrowDirection="right"
				v-if="current==tagEnum.ZERO" @cancel=""></u-cell>
			<u-cell title="场地" :value="param.siteTitle" @click="showSiteTitle()" :isLink="true" arrowDirection="right"
				v-if="current==tagEnum.ONE" @cancel=""></u-cell>
			<u-cell title="自定义时间" :isLink="true" arrowDirection="right" @click="showCalendar()">
				<view slot="value" class="u-slot-title">
					<view>
						<text class="u-p-r-10">{{param.startDateStr}}</text>
						<text> ~ </text>
						<text class="u-p-l-10">{{param.endDateStr}}</text>
					</view>
				</view>
			</u-cell>
			<merchantStoreSearchCheckbox ref="merchantStoreSearchCheckbox" :isShowToIn="siteChecksShow"
				@hideShow="closeSiteTitle()" @setSiteList="setSiteList" />
		</u-cell-group>
		<!-- 日历 -->
		<u-calendar :show="startTimePickerShow" maxRange="32" round="10" mode="range" @confirm="confirm" :allowSameDay="true" :minDate="timesTempMin"
			:maxDate="timesTempMax" monthNum="24" startText="开始" endText="结束" @close="startTimePickerShow=false">
		</u-calendar>
		<!-- 分账人员 -->
		<u-picker :show="qualificationShow" keyName="qualificationName" :columns="qualificationList"
			@confirm="selectOrderConfirm" @cancel="qualificationShow = false"></u-picker>
		<view class="amount">
			<u-row>
				<u-col span="3">
					<text>合计</text>
				</u-col>
				<u-col span="3">
					<text>{{moneyTotal}}（元）</text>
				</u-col>
			</u-row>
		</view>
    <view class="card" v-if="list.length>0">
      <u-scroll-list indicatorActiveColor="#6072FF">
        <view>
          <view class="data-contino">
            <view class="card-title">
              <view class="tiem">分账日期</view>
              <view class="changdi" v-if="current == tagEnum.ONE">场地</view>
              <view class="total" v-if="current == tagEnum.ONE">总收益</view>
              <view class="ren-yuan">分账人员</view>
            </view>
          </view>
          <view class="card-title" v-for="(item,index) in list" :key="index">
            <view style="display: flex;align-items: center;">
              <view class="tiem">{{item.dateStr}}</view>
              <view class="changdi" v-if="current == tagEnum.ONE">{{item.storeName}}</view>
              <view class="total" v-if="current == tagEnum.ONE">{{item.dateMoneyTotal}}</view>
              <view v-for="(ite,ind) in item.sname" :key="inde">
                <view class="ren-yuan">
                  <text>{{ite.name}}</text>
                  <text style="padding-left: 20rpx" v-if="ite.costAmount > 0">(含成本：{{ite.costAmount.toFixed(2)}})</text>
                </view>
                <view class="ren-yuan">{{ite.money}}</view>
              </view>
            </view>
          </view>
        </view>
      </u-scroll-list>
    </view>
		<u-empty v-else text="暂无分账数据" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" />
	</view>
</template>

<script>
	import merchantStoreSearchCheckbox from '@/components/merchant-store-search-checkbox/merchant-store-search-checkbox.vue'
	export default {
		components: {
			merchantStoreSearchCheckbox
		},
		data() {
			return {
				tagEnum:{
					ZERO:0,
					ONE:1,
				},
				current: 0,
				list: [],
				siteChecksShow: false,
				qualificationShow: false,
				startTimePickerShow: false,
				moneyTotal: 0,
				timesTempMin: '',
				timesTempMax: '',
				qualificationList: [
					[]
				],
				param: {
					startDateStr: '',
					endDateStr: '',
					qualificationId: '',
					siteTitle: '全部',
					name: '全部',
					merchantStoreIdArray: []
				},
				tagNameList: [{
					name: '结算查询',
				}, {
					name: '场地查询',
				}]
			}
		},
		onLoad() {
			// 默认查询最近七天不包含当天
			let time = this.$date.getTime();
			let list = this.$date.getDateRange(time.startYesterday, 6, true);
			this.param.startDateStr = list[0]
			this.param.endDateStr = list[1]
			this.initData()
			this.findQualificationByType()
		},
		onReady() {
			this.timesTempMin = this.$date.haflYear();
			let time = this.$date.getTime();
			this.timesTempMax = time.startYesterday
		},
		methods: {
			//导航切换
			changeCurrent(num) {
				console.log(num)
				this.current = num.index;
			},
			initData() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.$api('statsLedgerMerchant.findStatsLedgerMerchantData', this.param).then(res => {
					if (res.status == 0) {
						this.list = res.data
						console.log(this.list, "list")
						this.finStatsLedgerMerchantTotal()
						uni.hideLoading();
					} else {
						uni.hideLoading();
						getApp().err('加载不成功:' + res.msg);
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
			remarkNameShow() {
				this.qualificationShow = true
			},
			//日历弹出
			showCalendar(){
				this.startTimePickerShow = true
			},
			confirm(e) {
				this.param.startDateStr = e[0]
				this.param.endDateStr = e[e.length - 1]
				this.startTimePickerShow = false;
				this.initData();
			},
			//选场地
			setSiteList(data) {
				this.param.merchantStoreIdArray = data.merchantStoreIdArray;
				this.param.siteTitle = '已选中' + this.param.merchantStoreIdArray.length + '个场地';
				this.param.qualificationId = ''
				this.initData();
			},
			//查询分账人员
			findQualificationByType() {
				this.qualificationList[0] = [{
					id: '',
					qualificationName: '全部'
				}];
				this.$api('qualification.findQualificationByType', null)
					.then(res => {
						if (res.status == 0) {
							for (let d of res.data) {
								this.qualificationList[0].push({
									id: d.id,
									qualificationName: d.qualificationName
								})
							}
							console.log(this.qualificationList)
						} else {
							this.$helpers.toast('请求数据失败:' + res.msg);
						}
					})
			},
			//选择分账人员
			selectOrderConfirm(e) {
				this.param.qualificationId = e.value[0].id
				this.param.name = e.value[0].qualificationName
				this.qualificationShow = false
				this.param.merchantStoreIdArray = []
				this.initData();
			},
			//分账合计
			finStatsLedgerMerchantTotal() {
				this.$api('statsLedgerMerchant.finStatsLedgerMerchantTotal', this.param).then(res => {
					if (res.status == 0) {
						this.moneyTotal = res.data.moneyTotal
					} else {
						uni.hideLoading();
						getApp().err('加载不成功:' + res.msg);
					}
				}).catch(() => {
					this.$helpers.toast('请求数据失败:')
				})
			},
			showSiteTitle() {
				this.siteChecksShow = true;
				this.param.qualificationId = ''
			},
			closeSiteTitle() {
				this.siteChecksShow = false;
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .u-cell__body {
		padding: 30rpx 20rpx !important;
	}

	/deep/ .u-cell__title-text {
		font-size: $f-base !important;
		color: rgba(0, 0, 0, 0.9) !important;
	}

	/deep/ .u-cell__value {
		font-size: $f-base !important;
		color: rgba(0, 0, 0, 0.9) !important;
	}

	/deep/ .u-cell-group__title__text {
		font-size: $f-base !important;
		font-weight: bold !important;
	}

	.container {
		.amount {
			width: 100%;
			padding: 30rpx;
			margin-top: 30rpx;
			background: rgba(63, 120, 254, 0.1);
			//border: 1rpx solid rgb(217, 226, 255);
			font-size: $f-base;
		}

		.data-contino {
			display: flex;

		}

		.card {
			background-color: white;
			border-radius: 18rpx;
			margin: 20rpx 30rpx;
			padding: 20rpx;
			font-size: $f-base;

			.card-title {
				display: flex;
				margin-bottom: 30rpx;

			}

			.tiem {
				width: 200rpx;
			}

			.total {
				width: 148rpx;
			}

			.ren-yuan {
				width: 320rpx;
			}

			.changdi {
				width: 312rpx;
			}
		}
	}
</style>
